<template>
	<view>
		<view  v-for="item in data" key="item.coursename" @click="getid(item.courseId)">
			<view class="content">
				<view class="informationL">
					<image :src="item.url"></image>
				</view>
				<view class="informationR">
					<text class="name">{{item.coursename}}</text>
					<view class="rButton">
						<view class="rbL">
							<text class="iconfont icon-qian"></text>
							<text>{{item.courseprice}}</text>
						</view>
						<view class="rbR">{{item.rbR}}人正在学</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		defineProps,
		onMounted
	} from 'vue'
	const {
		data
	} = defineProps(['data'])
	let getid = (id) => {
		console.log(id);
		uni.navigateTo({
			url: `/pages/courseDetail/courseDetail?id=${id}`
		});
	}
</script>

<style lang="less">
	@import url('@/static/couua-iconfont/iconfont.css');

	.content {
		margin: 58rpx 40rpx;
		height: 156rpx;
		display: flex;

		.informationL {
			width: 288rpx;
			height: 156rpx;
			border-radius: 5px;
			display: flex;
			justify-content: space-between;

			image {
				width: 290rpx;
				height: 158rpx;
			}
		}

		.informationR {
			margin-left: 30rpx;
			margin-top: 34rpx;

			.name {
				font-weight: 700;
				font-size: 30rpx;
			}

			.rButton {
				width: 354rpx;
				display: flex;
				justify-content: space-between;
				margin-top: 24rpx;

				.rbL {
					font-weight: 700;
					font-size: 20rpx;
					line-height: 28rpx;
					color: #efb235;

					.iconfont {
						width: 28rpx;
						height: 28rpx;
						color: #efb235;
						vertical-align: middle;
						margin-right: 14rpx;
					}
				}

				.rbR {
					font-size: 22rpx;
					line-height: 28rpx;
					color: #919291;
				}
			}
		}
	}
</style>
